<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">{{pageType=='add'?'新增':'编辑'}}地址</block>
		</cu-custom>
		<view class="padding">
			<view class="box padding-lg bg-white radius-xl">
				<view class="item crow margin-bottom-xl">
					<view class="left text-left">联系地址</view>
					<view class="right">
						<input type="text" placeholder="选择联系地址"  @click="locationClich" v-model="form.address">
					</view>
					<view class="cuIcon-locationfill locationfill"></view>
				</view>
				<view class="item crow margin-bottom-xl">
					<view class="left text-left">门牌号</view>
					<view class="right">
						<input type="text" placeholder="门牌号,例如[1栋101室]" v-model="form.code">
					</view>
				</view>
				<view class="item crow margin-bottom-xl">
					<view class="left text-left">联系人</view>
					<view class="right">
						<input type="text" placeholder="请输入联系人" v-model="form.nickname">
					</view>
				</view>
				<view class="item crow margin-bottom-xl">
					<view class="left text-left">联系电话</view>
					<view class="right">
						<input type="number" placeholder="请输入联系电话" v-model="form.phone">
					</view>
				</view>
				<view class="item crow">
					<view class="left text-left">设为默认</view>
					<view class="right">
						<input type="text" disabled="">
					</view>
					<u-switch
						:value="selectedOption"
						@change="setDefault"
						:activeValue="1"
						:inactiveValue="0"
						activeColor="var(--theme-color)"
						style="transform: scale(0.7);">
					</u-switch>
				</view>
			</view>

			<view class="padding margin-top-lg">
				<view class="flex flex-direction">
					<button class="cu-btn china-btn-bg lg round" @click="submit()">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageType:'add',
				selectedOption:1,
				form: {
          address:'',
          code:'',
          nickname:'',
          phone:'',
          is_default:1,
          longitude:'',
          latitude:'',
          id: undefined
        },
			};
		},
		onLoad(options) {
			this.pageType = options.pageType;
      if (options.pageType == 'edit' && options.addressId) {
        this.$http.getAddressDetail({ id: options.addressId }).then(res => {
          this.form = res
          this.selectedOption = res.is_default
          console.log(this.form)
        })
      }
		},
		methods:{
			submit(){
				let form = {
          id: this.form.id,
          address: this.form.address,
          code: this.form.code,
          nickname: this.form.nickname,
          phone: this.form.phone,
          longitude: this.form.longitude,
          latitude: this.form.latitude,
          member_id: uni.getStorageSync('userInfo').id
        };
				form.is_default = this.selectedOption;
        if (form.id) {
          this.$http.updateAddress(form).then(() => {
            uni.showToast({
              title: '编辑成功',
              icon: 'success',
              duration: 2000
            });
          });
        } else {
          this.$http.createAddress(form).then(() => {
            uni.showToast({
              title: '新增成功',
              icon: 'success',
              duration: 2000
            });
            uni.navigateBack();
          });
        }
			},
			setDefault(e){
				let selectedOption = this.selectedOption == 0?1:0;
				this.selectedOption = selectedOption;
			},
			locationClich(e){
				let self = this;
				uni.chooseLocation({
					success: res => {
						self.form.longitude = res.longitude;
						self.form.latitude = res.latitude;
						self.form.address = res.address;
					},
					fail: err => {
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.box{
	.item{
		width: 100%;
		.left{
			width: 25%;
		}
		.right{
			width: 69%;
			input{
				font-size: 26upx;
			}
		}
		.locationfill{
			font-size: 35upx;
		}
	}
}
</style>
